<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <view class="back-button" @click="goBack">
            <text class="fas fa-arrow-left"></text>
          </view>
          <text class="header-title">新闻详情</text>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <view class="news-detail" v-if="newsData">
        <!-- 新闻标题 -->
        <view class="news-title">
          {{ newsData.title }}
        </view>

        <!-- 新闻元信息 -->
        <view class="news-meta">
          <text class="news-date">{{ newsData.date }}</text>
          <text class="news-source">来源: 绿色回收环保平台</text>
        </view>

        <!-- 新闻封面图 -->
        <image class="news-cover" :src="newsData.image" mode="aspectFill"></image>

        <!-- 新闻正文 -->
        <view class="news-content">
          <rich-text :nodes="newsData.content"></rich-text>
        </view>

        <!-- 相关推荐 -->
        <view class="related-news" v-if="relatedNews.length > 0">
          <view class="section-title">相关推荐</view>
          <view class="related-list">
            <view class="related-item" v-for="item in relatedNews" :key="item.id" @click="viewRelatedNews(item.id)">
              <text class="related-title">{{ item.title }}</text>
              <text class="related-date">{{ item.date }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载提示 -->
      <view class="loading" v-else>
        <text>加载中...</text>
      </view>
    </main>
  </view>
</template>

<script>
// 模拟新闻数据
const mockNewsData = {
  1: {
    id: 1,
    title: '新型回收技术大幅提高塑料回收效率，回收率提升40%',
    date: '2023-06-20',
    image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/607c91f3213f1f2ffafce4c11c53e577.png',
    content: `
      <p>据最新研究显示，一种新型化学分解技术已成功将塑料回收效率提升了40%。这项技术由国家环保研究院联合多家企业共同研发，能够更有效地分离不同类型的塑料，从而大大提高了回收利用率。</p>
      <p class="spacing">传统的塑料回收通常面临着分拣困难、纯度不高、再利用价值低等问题。新技术通过特殊的化学试剂和物理方法相结合的方式，能够在保持塑料原有特性的前提下，实现更精准的分类和更彻底的净化。</p>
      <p class="spacing">据项目负责人介绍，该技术已经在多个试点城市投入使用，初步数据显示，塑料回收率从原来的30%提升到了70%左右，而且回收后的塑料质量明显提高，可以用于生产更高附加值的产品。</p>
      <p class="spacing">环保部门表示，这项技术的推广应用将对减少塑料污染、节约资源、推动循环经济发展产生积极影响。预计在未来3-5年内，该技术将在全国范围内普及，有望使我国塑料回收利用率达到国际先进水平。</p>
    `
  },
  2: {
    id: 2,
    title: '本市新增20个智能回收站，居民可通过APP查询附近站点',
    date: '2023-06-15',
    image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/fb601c76dd068a97eeb33e6ef2b7569b.png',
    content: `
      <p>为提高回收便利性，市政府宣布将在今年内新增20个智能回收站，覆盖全市主要社区和商业区域。这些智能回收站将配备智能称重、自动结算、满溢提醒等功能，居民通过手机APP即可查询附近站点的位置和使用状态。</p>
      <p class="spacing">据市城管局相关负责人介绍，新增的智能回收站采用了最新的物联网技术，能够实现对回收物品的智能识别、分类和计量。居民投放可回收物后，系统会自动称重并计算对应的积分或金额，直接存入用户的个人账户。</p>
      <p class="spacing">此外，智能回收站还具备24小时监控功能，当回收箱即将满溢时，系统会自动通知工作人员进行清运，确保回收设施的正常运行。同时，为了方便老年人使用，每个站点还配备了简单的操作指南和求助按钮。</p>
      <p class="spacing">市民可以通过我市垃圾分类APP查询附近的智能回收站位置、使用状态和开放时间，还可以查看自己的回收记录和积分情况。目前，APP已经在各大应用商店上线，市民可免费下载使用。</p>
    `
  },
  3: {
    id: 3,
    title: '再生产品博览会下周开幕，展示回收材料创新应用',
    date: '2023-06-10',
    image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/41653efb296924ed80c42a51809fc0c6.png',
    content: `
      <p>一年一度的再生产品博览会将于6月25日在我市国际会展中心开幕，为期5天。本次博览会以"创新回收，绿色未来"为主题，将展示数百种由回收材料制成的创新产品，包括服装、家居用品、建筑材料等多个领域。</p>
      <p class="spacing">据主办方介绍，本次博览会吸引了来自国内外200多家企业参展，展品涵盖了再生塑料、再生纸、再生金属、再生纺织品等多个类别。其中，一些由海洋塑料垃圾制成的运动服装和由废弃电子产品回收材料制成的艺术品备受关注。</p>
      <p class="spacing">博览会期间，还将举办多场主题论坛和技术研讨会，邀请国内外专家学者和企业代表分享再生资源利用的最新技术和经验。此外，现场还将设置互动体验区，让观众亲身体验再生产品的制作过程和使用效果。</p>
      <p class="spacing">主办方表示，希望通过本次博览会，提高公众对再生产品的认识和接受度，推动更多企业参与到再生资源利用中来，共同建设美丽绿色家园。门票将于6月20日起通过官方网站和APP发售，市民可提前预约。</p>
    `
  }
};

export default {
  data() {
    return {
      newsData: null,
      relatedNews: []
    };
  },
  onLoad(options) {
    // 获取传入的新闻ID
    const newsId = options.id || 1;
    this.loadNewsData(newsId);
  },
  methods: {
    // 加载新闻数据
    loadNewsData(id) {
      // 在实际应用中，这里应该是一个API请求
      // 这里使用模拟数据
      const newsId = parseInt(id);
      this.newsData = mockNewsData[newsId];
      
      // 加载相关推荐
      this.loadRelatedNews(newsId);
    },
    
    // 加载相关推荐
    loadRelatedNews(currentId) {
      // 过滤掉当前新闻，获取其他新闻作为相关推荐
      this.relatedNews = Object.values(mockNewsData)
        .filter(news => news.id !== currentId)
        .slice(0, 2); // 只显示2条相关推荐
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 查看相关新闻
    viewRelatedNews(id) {
      // 重新加载当前页面，显示相关新闻
      this.loadNewsData(id);
      // 滚动到页面顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    }
  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-button {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.back-button .fas {
  font-size: 28rpx;
  color: #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 主内容区 */
.main-content {
  padding: 120rpx 30rpx 30rpx;
}

/* 加载提示 */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  color: #999;
  font-size: 28rpx;
}

/* 新闻详情 */
.news-detail {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
}

.news-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 20rpx;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
  font-size: 24rpx;
  color: #999;
}

.news-cover {
  width: 100%;
  height: 400rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.news-content {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
}

.news-content p {
  margin-bottom: 20rpx;
}

.news-content .spacing {
  margin-top: 20rpx;
}

/* 相关推荐 */
.related-news {
  margin-top: 40rpx;
  padding-top: 30rpx;
  border-top: 1rpx solid #eee;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.related-item {
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
  transition: all 0.3s ease;
}

.related-item:active {
  background-color: #f0f0f0;
}

.related-title {
  font-size: 26rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.related-date {
  font-size: 22rpx;
  color: #999;
}
</style>